import NotAccessPage from '@/components/NotAccessPage';
import PageContainerAggregationCounty from '@/pages/aggregation/county/components/PageContainerAggregationCounty/PageContainerAggregationCounty';
import NeedsPage from '@/pages/instruct/interview';
import PagePressconference from '@/pages/pressconference/page/PagePressconference';
import { parse } from '@/utils/historyUtils';
import {
  AudioOutlined,
  BookOutlined,
  CodepenOutlined,
  DatabaseOutlined,
  LayoutOutlined,
  NotificationOutlined,
  ProfileOutlined,
} from '@ant-design/icons';
import { useAccess, useModel } from '@umijs/max';
import { Badge, Card, Layout, Menu } from 'antd';
import { SelectInfo } from 'rc-menu/lib/interface';
import { useEffect, useState } from 'react';
import Clue from './clue';
import Analysis from './components/analysis';
import IrsClue from './irsClue';
import Masses from './masses';
import Seek from './seek';

type DetailsType = {
  id: string;
  name: string;
};

export default (): React.ReactNode => {
  const access = useAccess();
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const [tabActiveKey, setTabActiveKeyState] = useState<string>('clue');
  const [type, setType] = useState<string>('TableActive');
  const [selectMenuName, setSelectMenuName] = useState<string>('报送线索');
  const [interviewSearchId, setInterviewSearchId] = useState<string>('');
  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };

  useEffect(() => {
    const { param } = parse(location.search) as { param: string };
    console.log(param);

    // 初始化变量
    let id, activeKey, type;
    if (param) {
      console.log(param);
      // 分割字符串
      const parts = param.split(',');

      // 检查并提取 ID
      if (parts.length > 0) {
        id = parts[0]; // 提取出 ID
      }

      // 处理 activeKey 部分
      if (parts.length > 1) {
        const activeKeyPart = parts[1]; // 提取 activeKey 部分
        const activeKeyParts = activeKeyPart.split('=');

        if (activeKeyParts.length > 1) {
          activeKey = activeKeyParts[1]; // 提取出 activeKey 的值
        } else {
          activeKey = null; // 如果没有等号，则将 activeKey 设置为 null
        }
      } else {
        activeKey = null; // 只有 ID，没有 activeKey
      }

      // 处理 type 部分（第三个参数）
      if (parts.length > 2) {
        const typePart = parts[2]; // 提取 type 部分
        const typeParts = typePart.split('=');

        if (typeParts.length > 1) {
          type = typeParts[1]; // 提取出 type 的值
        } else {
          type = null; // 如果没有等号，则将 type 设置为 null
        }
      } else {
        type = null; // 没有 type 参数
      }

      console.log(id, interviewSearchId);
      setInterviewSearchId(id);

      setTabActiveKeyState(activeKey);

      // 如果有 type 参数，设置它
      if (type) {
        setType(type); // 假设你有一个 setType 的状态设置函数
      }
    }
  }, []);

  const getMenuName = (key: string) => {
    let menuName = '';
    if (key === 'analysis') {
      menuName = '数据分析';
    }
    if (key === 'clue') {
      menuName = '报送线索';
    }
    if (key === 'seek') {
      menuName = '其他线索';
    }
    if (key === 'county') {
      menuName = '融媒通';
    }
    if (key === 'masses') {
      menuName = '群众爆料';
    }
    if (key === 'interview') {
      menuName = '采访需求';
    }
    if (key === 'pressconference') {
      menuName = '新闻发布';
    }
    return menuName;
  };

  const menuList = () => {
    let menus = new Array();

    if (access.主动报送x页面 || access.线索征集x页面) {
      if (access.主动报送x配置x提供者) {
        menus = [
          {
            label: <span>报送线索{renderBadge(0, false)}</span>,
            key: 'clue',
            icon: <DatabaseOutlined />,
          },
          {
            label: <span>全域线索{renderBadge(0, false)}</span>,
            key: 'seek',
            icon: <BookOutlined />,
          },
          {
            label: <span>IRS 线索{renderBadge(0, false)}</span>,
            key: 'irs',
            icon: <CodepenOutlined />,
          },
          {
            label: <span>群众爆料{renderBadge(0, false)}</span>,
            key: 'masses',
            icon: <NotificationOutlined />,
          },
          {
            label: <span>融媒通{renderBadge(0, false)}</span>,
            key: 'county',
            icon: <LayoutOutlined />,
          },
        ];
      } else {
        menus = [
          {
            label: <span>报送线索{renderBadge(0, false)}</span>,
            key: 'clue',
            icon: <DatabaseOutlined />,
          },
          {
            label: <span>IRS 线索{renderBadge(0, false)}</span>,
            key: 'irs',
            icon: <CodepenOutlined />,
          },
          {
            label: <span>群众爆料{renderBadge(0, false)}</span>,
            key: 'masses',
            icon: <NotificationOutlined />,
          },
          {
            label: <span>融媒通{renderBadge(0, false)}</span>,
            key: 'county',
            icon: <LayoutOutlined />,
          },
        ];
      }
    }

    if (access.媒体采访x页面) {
      menus = [
        ...menus,
        {
          label: <span>采访需求{renderBadge(0, false)}</span>,
          key: 'interview',
          icon: <ProfileOutlined />,
        },
      ];
    }

    if (access.新闻发布x页面) {
      menus = [
        ...menus,
        {
          label: <span>新闻发布{renderBadge(0, false)}</span>,
          key: 'pressconference',
          icon: <AudioOutlined />,
        },
      ];
    }

    return menus;
  };

  const container = () => {
    if (
      access.主动报送x页面 ||
      access.线索征集x页面 ||
      access.媒体采访x页面 ||
      access.新闻发布x页面
    ) {
      if (tabActiveKey === 'analysis') {
        return Analysis;
      } else if (tabActiveKey === 'clue') {
        // 只有当interviewSearchId有值或不需要时才渲染Clue
        return interviewSearchId !== '' ? (
          <Clue type={type} submitId={interviewSearchId} />
        ) : (
          <Clue type={type} />
        );
      } else if (tabActiveKey === 'seek') {
        return <Seek />;
      } else if (tabActiveKey === 'irs') {
        return <IrsClue />;
      } else if (tabActiveKey === 'county') {
        return <PageContainerAggregationCounty />;
      } else if (tabActiveKey === 'masses') {
        return <Masses isEditable={false} />;
      } else if (tabActiveKey === 'interview') {
        return <NeedsPage interviewSearchId={interviewSearchId} />;
      } else if (tabActiveKey === 'pressconference') {
        return <PagePressconference />;
      } else {
        return <NotAccessPage />;
      }
    } else {
      return <NotAccessPage />;
    }
  };

  return (
    <Layout
      hasSider
      style={{
        backgroundColor: '#F7F7F7',
        padding: '15px',
        height: '100%',
      }}
    >
      <Layout.Sider
        width={300}
        style={{
          backgroundColor: '#F7F7F7',
          overflow: 'auto',
          height: '100%',
          position: 'fixed',
          paddingBottom: 30,
        }}
      >
        <Card
          style={{
            height: '100%',
          }}
          bordered={false}
          styles={{
            body: {
              padding: '8px 15px 15px',
            },
          }}
        >
          <span
            style={{
              fontSize: 14,
              display: 'flex',
              justifyContent: 'center',
              padding: 5,
              fontWeight: 'bold',
            }}
          >
            全域线索归集
          </span>
          <Menu
            onSelect={(info: SelectInfo) => {
              getMenuName(info.key);
              setTabActiveKeyState(info.key);
            }}
            style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
            selectedKeys={[tabActiveKey]}
            mode="vertical"
            items={menuList()}
          />
        </Card>
      </Layout.Sider>

      <Layout.Content style={{ marginLeft: '315px' }}>
        <div
          style={{
            width: 'calc(100% - 315px)',
            height: '100%',
            position: 'fixed',
            paddingBottom: 30,
            paddingRight: 30,
          }}
        >
          <Card
            style={{
              height: '100%',
              overflow: 'auto',
            }}
            styles={{
              body: {
                padding: '8px',
              },
            }}
          >
            {container()}
          </Card>
        </div>
      </Layout.Content>
    </Layout>
  );
};
